<template>
  <div>
    <div class="label" v-for="(item,index) in data" :key="index">
      <van-image :src="item.scene_pic_url"/>
      <div class="title">
        {{ item.title }}
      </div>
      <div class="subtitle">{{ item.subtitle }}</div>
      <div class="price">
        ￥{{ item.price_info }} 元起
      </div>
    </div>
    <div class="changeBtn">
      <van-button @click="backPage" :disabled="currentPage === 1">上一页</van-button>
      <van-button @click="nextPage" :disabled="currentPage >= totalPages">下一页</van-button>
    </div>
  </div>
</template>

<script>
import {getTopicList} from "@/api/home";

export default {
  name: "Label",
  data() {
    return {
      count: "",
      totalPages: "",
      currentPage: "",
      data: "",
    }
  },
  mounted() {
    this.getInfo(1);
  },
  methods: {
    getInfo(currentPage) {
      getTopicList({
        page: currentPage,
        size: 10,
      }).then(({data}) => {
        this.data = data.data;
        this.currentPage = data.currentPage;
        this.totalPages = data.totalPages;
        this.count = data.count;
      })
    },

    backPage() {
      this.getInfo(this.currentPage - 1);
    },
    nextPage() {
      this.getInfo(this.currentPage + 1);
    }
  },
}
</script>

<style scoped lang="less">
.label {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  margin-bottom: 20px;

  .title {
    font-size: 18px;
    line-height: 50px;
  }

  .subtitle {
    margin-bottom: 10px;
  }

  .price {
    margin-bottom: 10px;
    color: darkred;
  }
}

.changeBtn {
  display: flex;

  .van-button {
    width: 50%;
  }
}
</style>
